<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图表</title>

    <script type="text/javascript" src="../echartsjs/echarts.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.7/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/sendoutdetail.component.css">
    <style type="text/css">

        #container {
            position: absolute;

            bottom: 0px;
            left: 5px;
            right: 5px;
            margin: 0 auto;
            z-index: 99;
            top: 0px;
            border: 2px solid #333333;
        }

    </style>

</head>
<body style="height: 100%; margin: 0">

<div class="main-d">

    <!--获取全局数据-->
    <script type="text/javascript">
        var LineX01=[];
        var LineX02=[];
        var LineY01=[];
        var LineY02=[];
        var parameter = getRequest();
        var millName = parameter['millname'];//参数名


        console.log(GetLine());

        //获取折线图数据
        function GetLine(){
            LineX01=[];
            LineX02=[];
            LineY01=[];
            LineY02=[];

            $.ajax({
                url: 'https://www.xdfznh.club/wxpadbe/dynamicDS/query'
                    + "/call BPCPAccess('"+millName+"')",
                  //  + "/call BPCPAccess('朗迪印染')",

                type: "GET",
                datatype: "json",
                success: function (data) {
                   console.log(data);
                 //   var datacp=data.filter(item=>item.b_type==='成品出库');
                 //   var databp=data.filter(item=>item.b_type==='白坯入库');

                    for (let i = 0; i < data.length; i++) {
                        LineX01.push(data[i]["b_date"]);
                        LineY01.push(data[i]["cpckQty"]);
                        //LineX02.push(data[i]["b_date"]);
                        LineY02.push(data[i]["bprkQty"]);
                    }

                   /* for (let i = 0; i < databp.length; i++) {
                        LineX02.push(databp[i]["b_date"]);
                        LineY02.push(databp[i]["b_qty"]);
                    }*/
                    getZXimang();
                }
            })
        };



        //获取浏览器地址参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }

        //获取浏览器地址参数（参数为中文）
        function getRequest() {
            var url = window.location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for(var i = 0; i < strs.length; i ++) {
                    //就是这句的问题
                    theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
                    //之前用了unescape()
                    //才会出现乱码
                }
            }
            return theRequest;
        }


    //生成折线图
    function getZXimang() {
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;

            option = {

                tooltip: {
                      trigger: 'axis'
                  },

                legend : {
                    data:[{name:'成品出库',icon:'rect',textStyle:{fontSize:36,color:'#FFCC33'}},
                        {name:'白坯入库',icon:'rect',textStyle:{fontSize:36,color:'#6666FF'}}
                    ]
                },

                grid: {
                    left: '1%',
                    right: '3%',
                    bottom: '5%',
                    top:'10%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                //给x轴设置滚动条
                dataZoom: [
                    {
                        start:0,//默认为0
                        end: 80,
                        type: 'slider',
                        show: false,
                        xAxisIndex: [0],
                        handleSize: 10,//滑动条的 左右2个滑动条的大小
                        height: 20,//组件高度
                        left: 50, //左边的距离
                        right: 50,//右边的距离
                        bottom: 10,//右边的距离
                        handleColor: '#ddd',//h滑动图标的颜色
                        handleStyle: {
                            borderColor: "#cacaca",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#ddd",
                            shadowColor: "#ddd",
                        },
                        fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                            //给第一个设置0，第四个设置1，就是垂直渐变
                            offset: 0,
                            color: '#1eb5e5'
                        }, {
                            offset: 1,
                            color: '#5ccbb1'
                        }]),
                        backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                        filterMode: 'filter'
                    },
                    //下面这个属性是里面拖到
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,//默认为1
                        end: 50
                    },
                ],

                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {
                        interval: 0,
                        fontSize:23,
                        rotate:60,//-30度角倾斜显示
                    },
                    data: LineX01,
                    //['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日']
                  }],
                yAxis: [{
                    type: 'value',
                    name: '单位·吨',
                    nameTextStyle:{
                        fontSize:36,
                    },
                    axisLabel: {
                        interval: 0,
                        fontSize:23,
                    }
                }],
                series: [
                    {
                        name:'成品出库',
                        type:'line',
                       // stack: '总量',
                        smooth:true,
                        yAxisIndex:0,
                        symbolSize:20,
                        itemStyle : {
                            normal: {
                                label : {
                                    show: true,
                                    fontSize:28,
                                    textStyle:{color:'#333'},
                                }, //显示折线上的值
                                color:'#FFCC33',
                                //color: '#8cd5c2', //改变折线点的颜色
                                //lineStyle: {
                                // color: '#8cd5c2' //改变折线颜色
                                //}
                                lineStyle:{width:10}  /*线体的粗细*/
                            }
                        },
                        data:LineY01,
                    },
                    {
                        name:'白坯入库',
                        type:'line',
                      //  stack: '总量',
                        smooth:true,
                        symbolSize:20,
                        itemStyle : {
                            normal: {
                                label : {
                                    show: true,
                                    fontSize:30,
                                    textStyle:{color:'#333'},
                                }, //显示折线上的值
                                color:'#6666FF',
                                //color: '#8cd5c2', //改变折线点的颜色
                                //lineStyle: {
                                // color: '#8cd5c2' //改变折线颜色
                                //}
                                lineStyle:{width:10}  /*线体的粗细*/
                            }
                        },
                        data:LineY02,
                    }


                ]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }


    }


    </script>

    <!--折线图-->
    <div id="container" ></div>
    <script type="text/javascript"></script>

</div>

</body>
</html>


